import { ref } from 'vue'
import { findTopCategory } from '@/api/category.js'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

// 解决缓存问题
//  思路：
//    1. 监听id的变化 重新使用最新id发送接口请求
//       watch
//       beforeRouteUpdate: router内部的钩子函数 每次路由切换之前
//       都执行一次 在里面我们可以拿到当前最新的id参数
//       在里面重新发送数据请求即可
//       精确控制 不会存在浪费

//    2. 尝试破坏它的缓存机制 不让它缓存
//       router-view + key
//       粗暴简单 一旦加上key之后 所有的缓存都没了
//       可能会存在浪费

//       推荐：在不涉及到性能问题的时候 使用key更加的简单方便
//       如果当前路由组件涉及到的组件非常多 且明确要求不能存在浪费 此时选择精细化方案
function useCategoryData () {
  const categoryData = ref([])

  // 首次加载还需要用route.params.id 变化要用to.params.id
  // 默认参数 传就以传入的为主 不传就是等于号后面的
  const route = useRoute()// 这个是可以在serup中拿取id，内置的
  // async function getCategroyAllList ()

  async function loadCategoryList (id = route.params.id) {
    // 16.2因为需要传递参数，接口需要的
    // const res = await findTopCategory(route.params.id)

    const res = await findTopCategory(id)
    categoryData.value = res.result.children
  }
  // loadSliders()
  loadCategoryList()

  onBeforeRouteUpdate((to) => {
    // to:跳转到的新路由的路由对象 里面有id
    console.log(to)
    // 使用最新id获取新数据
    loadCategoryList(to.params.id)
  })
  return {
    categoryData
  }
}

export default useCategoryData
